<template>
  <el-container style="height: 100vh;">
    <el-header class="header">
      <div class="school">
        <h1>河北师范大学</h1>
        <div class="scLogo" v-if="userInfo.auth[0] == 'admin_per'" style="cursor: pointer;">
          <el-image style="width: 50px; height: 50px"
            src="https://tse2-mm.cn.bing.net/th/id/OIP-C.5QQ0iqhdjQOYkjTB0PPZ_wEDDw?w=170&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7"></el-image>
        </div>
        <div class="scLogo" v-else>
          <el-image style="width: 50px; height: 50px"
            src="https://tse2-mm.cn.bing.net/th/id/OIP-C.5QQ0iqhdjQOYkjTB0PPZ_wEDDw?w=170&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7"></el-image>
        </div>
        <!-- 修改校徽弹框 -->
        <!-- <el-dialog title="修改校徽" :visible.sync="dialog" :show-close='close'>
          <div
            style="display: flex; flex-direction: row; justify-content: space-around; align-items: center; width: 100%; margin: 5px auto;">
            <input type="file" multiple id="image" @change="select" style="display: none;">
            <label for="image">
              <img v-if="!editInfo.teacherIco" class="img"
                src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" />
              <el-image v-else class="img" :src="editInfo.teacherIco" />
            </label>
            <el-button type="primary" @click="Submit(editInfo.id)">确认更换</el-button>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false" v-if="close">取 消</el-button>
            <el-button type="primary" @click="submitForm('form')">确 定</el-button>
          </div>
        </el-dialog> -->
      </div>
      <h2>{{ title }}</h2>
      <div class="user">
        <el-dropdown @command="handleCommand">
          <i class="el-icon-setting"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="changeUserInfo" v-if="userInfo.auth[0] != 'admin_per'">修改用户信息</el-dropdown-item>
            <el-dropdown-item command="changePassword">修改密码</el-dropdown-item>
            <el-dropdown-item command="logOut">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span>{{ userName }}</span>
      </div>
    </el-header>
    <!-- 修改密码弹框 -->
    <el-dialog title="修改密码" :visible.sync="dialogFormVisible" :show-close='close'>
      <el-form :model="form" status-icon :rules="rules" ref="form">
        <el-form-item prop="oldPassword">
          <el-input v-model="form.oldPassword" autocomplete="off" placeholder="旧密码" type="password"></el-input>
        </el-form-item>

        <el-form-item prop="newPassword">
          <el-input v-model="form.newPassword" autocomplete="off" placeholder="新密码" type="password"></el-input>
        </el-form-item>

        <el-form-item prop="confirmPassword">
          <el-input v-model="form.confirmPassword" autocomplete="off" placeholder="确认密码" type="password"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false" v-if="close">取 消</el-button>
        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改用户信息弹框 -->
    <el-dialog title="修改用户信息" :visible.sync="dialogUser" :show-close='close'>
      <el-form :model="userForm" status-icon :rules="rules" ref="userForm" v-if="userInfo.auth[0] == 'student_per'">
        <el-form-item prop="studentName">
          <el-input v-model="userForm.studentName" autocomplete="off" placeholder="姓名"></el-input>
        </el-form-item>

        <el-form-item prop="studentPhone">
          <el-input v-model="userForm.studentPhone" autocomplete="off" placeholder="电话"></el-input>
        </el-form-item>
      </el-form>

      <el-form :model="userForm" status-icon :rules="rules" ref="userForm" v-if="userInfo.auth[0] == 'teacher_per'">
        <el-form-item prop="teacherName">
          <el-input v-model="userForm.teacherName" autocomplete="off" placeholder="姓名"></el-input>
        </el-form-item>

        <el-form-item prop="teacherPhone">
          <el-input v-model="userForm.teacherPhone" autocomplete="off" placeholder="电话"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogUser = false" v-if="close">取 消</el-button>
        <el-button type="primary" @click="changeUser('userForm')">确 定</el-button>
      </div>
    </el-dialog>


    <el-container style="height: 90vh;">
      <el-aside width="230px" style="background-color: rgb(238, 241, 246);">

        <el-menu :default-openeds="['1', '2', '3']" :default-active="active" router background-color="#545c64"
          text-color="#fff" active-text-color="#ffd04b" style="margin:0 auto;border:none;height: 91.5vh;">

          <el-submenu index="1" v-if="auth.msgManage.length != 0">

            <template slot="title">
              <i class="el-icon-s-management"></i>
              <span style="font-size: large;font-weight: bold;">信息管理</span>
            </template>

            <el-menu-item-group>

              <el-menu-item v-for="(item, i) in auth.msgManage" :key="item.index + i" :index="item.index">
                <i :class="[item.icon]"></i>
                <span>{{ item.name }}</span>
              </el-menu-item>

            </el-menu-item-group>
          </el-submenu>

          <!-- <el-submenu index="2" v-if="auth.staffManage.length != 0"> -->
          <el-submenu index="2" v-if="auth.staffManage.length != 0">

            <template slot="title">
              <i class="el-icon-s-custom"></i>
              <span style="font-size: large;font-weight: bold;">人员管理</span>
            </template>

            <el-menu-item-group>

              <el-menu-item v-for="(item, i) in auth.staffManage" :key="item.index + i" :index="item.index">
                <i :class="[item.icon]"></i>
                <span>{{ item.name }}</span>
              </el-menu-item>

            </el-menu-item-group>

          </el-submenu>

          <!-- <el-submenu index="3" v-if="auth.scheduleManage.length != 0"> -->
          <el-submenu index="3" v-if="auth.scheduleManage.length != 0">

            <template slot="title">
              <i class="el-icon-date"></i>
              <span style="font-size: large;font-weight: bold;">课表管理</span>
            </template>

            <el-menu-item-group>

              <el-menu-item v-for="(item, i) in auth.scheduleManage" :key="item.index + i" :index="item.index">
                <i :class="[item.icon]"></i>
                <span>{{ item.name }}</span>
              </el-menu-item>

            </el-menu-item-group>

          </el-submenu>

        </el-menu>
      </el-aside>

      <el-main style="margin:0;padding: 0;height: 91.5vh;">
        <!-- <router-view @transfer="change" @setStorage="setStorage" /> -->
        <router-view @transfer="change" />
      </el-main>
    </el-container>

  </el-container>
</template>

  

<script>
export default {

  name: 'HomePage',
  data() {
    return {
      userInfo: {
        auth: []
      },
      userName: '王小虎',
      dialogFormVisible: false,
      dialogUser: false,
      close: false,
      isDefaultPassword: 0,
      auth: {
        staffManage: [],
        scheduleManage: [],
        msgManage: []
      },
      formLabelWidth: '120px',
      active: '',
      title: '',
      form: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      },
      userForm: {
        id: '',
        schoolId: '',
        studentId: '',
        studentName: '',
        studentPhone: '',
        teacherId: '',
        teacherName: '',
        teacherPhone: ''
      },
      rules: {
        oldPassword: [
          { required: true, message: '旧密码不能为空', trigger: 'blur' }
        ],
        newPassword: [
          { required: true, message: '新不能为空', trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: '确认密码不能为空', trigger: 'blur' }
        ]
      },
      menuGroup: {
        admin_per: {
          msgManage:
            [
              { index: "/home/period", icon: "el-icon-date", name: '课时管理' },
              { index: "/home/schedule", icon: "el-icon-s-order", name: '课表管理' },
              // { index: "/home/lesson", icon: "el-icon-s-data", name: '课时管理' },
              { index: "/home/grade", icon: "el-icon-s-home", name: '年级管理' },
              { index: "/home/class", icon: "el-icon-s-flag", name: '班级管理' },
              { index: "/home/course", icon: "el-icon-data-analysis", name: '课程管理' },
              { index: "/home/coursesync", icon: "el-icon-collection", name: '同步课管理' },
            ],
          staffManage: [
            { index: "/home/teacher", icon: "el-icon-monitor", name: '教师管理' },
            { index: "/home/student", icon: "el-icon-male", name: '学生管理' },
          ],
          scheduleManage: [
            { index: "/home/arrcourse", icon: "el-icon-c-scale-to-original", name: '排课管理' },
            { index: "/home/selectcourse", icon: "el-icon-s-data", name: '选课管理' },
          ]
        },
        headTeacher_per: {
          msgManage:
            [
              { index: "/home/schedule", icon: "el-icon-s-order", name: '课表管理' },
              { index: "/home/period", icon: "el-icon-date", name: '课时管理' },
            ],
          staffManage: [
            { index: "/home/student", icon: "el-icon-male", name: '学生管理' },
          ],
          scheduleManage: []
        },
        teacher_per: {
          msgManage:
            [
              { index: "/home/schedule", icon: "el-icon-s-order", name: '课表管理' },
              { index: "/home/period", icon: "el-icon-date", name: '课时管理' },
            ],
          staffManage: [
            { index: "/home/student", icon: "el-icon-male", name: '学生管理' },
          ],
          scheduleManage: []
        },
        student_per: {
          msgManage:
            [
              { index: "/home/schedule", icon: "el-icon-s-order", name: '课表管理' },
              { index: "/home/selectcourse", icon: "el-icon-s-data", name: '选课管理' },
            ],
          staffManage: [

          ],
          scheduleManage: []
        }
      }
    }
  },
  methods: {
    change(msg) {//修改标题
      this.title = msg;
    },
    submitForm(form) {//修改密码
      this.$refs[form].validate((valid) => {
        if (valid) {
          (async () => {
            let fd = new FormData();
            let obj = {};
            obj.oldPassword = await this.Rsa.noTokenRsa(this.form.oldPassword);
            obj.newPassword = await this.Rsa.noTokenRsa(this.form.newPassword);
            obj.confirmPassword = await this.Rsa.noTokenRsa(this.form.confirmPassword);
            let keys = Object.keys(obj);
            // console.log(this.form);
            console.log(obj);
            keys.map(key => {
              fd.append(key, obj[key])
            })
            let result = await this.$axios.post('http://39.105.215.62:8300/login/updatePassword', fd)
            console.log(result);
            if (result.code == '200') {
              this.dialogFormVisible = false;
              alert(result.msg);
              sessionStorage.removeItem("token");
              // 页面跳转
              this.$router.push('/login')
              this.$message({
                showClose: true,
                message: result.data,
                type: 'success'
              });

            }
          })()
        } else {
          this.$message.error('存在未填项')
          return false;
        }
      });
    },
    //修改用户信息
    changeUser(form) {
      this.$refs[form].validate(async (valid) => {
        if (valid) {
          if (this.userInfo.auth[0] == 'teacher_per') {
            let res = await this.$axios.post('http://39.105.215.62:8100/teacher/updateTeacherByUser', { id: this.userInfo.id, schoolId: this.userInfo.schoolId, teacherId: this.userInfo.teacherId, teacherName: this.userForm.teacherName, teacherPhone: this.userForm.teacherPhone });
            console.log(res);
          }
          if (this.userInfo.auth[0] == 'student_per') {
            let res = await this.$axios.post('http://39.105.215.62:8100/student/updateStudentByUser', { id: this.userInfo.id, schoolId: this.userInfo.schoolId, studentId: this.userInfo.studentId, studentName: this.userForm.studentName, studentPhone: this.userForm.studentPhone });
            console.log(res);
          }
        } else {
          this.$message.error('存在未填项')
          return false;
        }
      });
    },
    async logOut() {//退出登录
      let res = await this.$axios.get('http://39.105.215.62:8300/logout/logout');
      console.log(res);
      if (res.code == '200') {
        alert(res.msg);
        // 页面跳转
        sessionStorage.removeItem("token");
        sessionStorage.removeItem("info");
        this.$router.push('/')
        this.$message({
          showClose: true,
          message: res.data,
          type: 'success'
        });
      }
    },
    async handleCommand(command) {//下拉菜单选择
      if (command == "changeUserInfo") {
        this.$message('click on item ' + command);
        this.dialogUser = true;
        if (this.userInfo.auth[0] == 'teacher_per') {
          this.userForm.teacherName = this.userInfo.teacherName
          this.userForm.teacherPhone = this.userInfo.teacherPhone
        }
        if (this.userInfo.auth[0] == 'student_per') {
          this.userForm.studentName = this.userInfo.studentName
          this.userForm.studentPhone = this.userInfo.studentPhone
        }
      }
      if (command == 'changePassword') {
        this.dialogFormVisible = true;
      }
      if (command == 'logOut') {
        await this.logOut();
      }
    }
  },
  // 生命周期函数--钩子函数一般在初始化页面完成后，再对DOM节点进行相关操作
  async mounted() {
    this.active = this.$route.path;//标题
    let info = JSON.parse(sessionStorage.getItem('info'));
    this.userInfo = JSON.parse(sessionStorage.getItem('info'));
    console.log(this.userInfo);
    this.userName = info.auth[0];
    this.auth = this.menuGroup[info.auth[0]];
    // this.auth = 'teacher_per';
    let isDefaultPassword = info.isDefaultPassword;
    // let isDefaultPassword = 0;
    if (isDefaultPassword == 0) {
      this.dialogFormVisible = true;
      this.close = false
    } else {
      this.dialogFormVisible = false;
      this.close = true;
      this.isDefaultPassword = isDefaultPassword
    }
  }
}
</script>

  

  // <!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}

.header {
  height: 10vh;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 14px;
}

.school {
  width: 200px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.scLogo {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  overflow: hidden;
}

.el-icon-setting {
  margin-right: 15px;
}
</style>

  